<template>
  <div>
    <Modal v-model="device_modal" :title="device_title" @on-cancel="cancel">
        <Form :model="formDevice" :label-width="100">
            <Row :gutter="24">
                <Col span="22">
                    <FormItem label="设备信息:">
                    <Select v-model="formDevice.deviceId" @on-change="change_device" multiple>
                        <Option v-for="item in device_listData" :value="item.deviceId" :key="item.deviceId">{{ item.deviceName }}</Option>
                    </Select>
                    </FormItem>
                    <FormItem label="设备名称:">
                        <Input v-model="formDevice.subName" placeholder="请输入设备名称"></Input>
                    </FormItem>
                    <FormItem label="设备描述:">
                        <Input v-model="formDevice.desc" placeholder="请输入设备描述"></Input>
                    </FormItem>
                    <FormItem label="名称显示:">
                        <RadioGroup v-model="formDevice.isVisibleName">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="描述显示:">
                        <RadioGroup v-model="formDevice.isVisibleDesc">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="设备组合:">
                        <RadioGroup v-model="formDevice.isVisibleGroup">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="位置调整:">
                        <RadioGroup v-model="formDevice.isVisiblePosition">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <!-- 保存--取消按钮 -->
        <div slot="footer">
            <Row :gutter="24" type="flex" justify="end">
            <Col span="5">
                <Button type="primary" size="large" long @click="submit">应用</Button>
            </Col>
            <Col span="5">
                <Button size="large" long @click="cancel">取消</Button>
            </Col>
            </Row>
        </div>
    </Modal>
  </div>
</template>

<script>
// 获取设备信息列表json数据
import devicesInfo from './resources/deviceInfo.json'
export default {
    props: ['deviceData'],
    data(){
        return {
            device_modal: false,
            device_title: '绑定设备信息',
            device_listData: [],
            formDevice:{
                deviceId: "",
                deviceName: "",
                deviceType: "",
                subName: "",
                desc: "",
                isVisibleName: "1", // 1-默认显示 0-不显示
                isVisibleDesc: "1",
                isVisibleGroup: "1",
                isVisiblePosition: "1"
            }

        }
    },
    methods: {
        //改变设备i
        change_device(idArry){
            // console.log("idArry:", idArry);
            let mew_name = [];
            if (idArry.length > 0) {
                this.device_listData.map(v=>{
                    idArry.map((k, i)=>{
                        if( idArry[i] === v.deviceId){
                            let a = v.deviceName;
                            mew_name.push(a);
                            this.formDevice.subName = mew_name.join(','); //双向数据绑定给名称赋值
                        }
                    })
                })
            }
        },
        //应用
        submit () {
            let resultDeviceData = [];
            let _nameArr = this.formDevice.subName.split(',');
            console.log('应用:', this.formDevice.isVisibleName)
            this.formDevice.deviceId.map((v, i)=>{
                resultDeviceData.push({ 
                    deviceId: v,
                    deviceName: _nameArr[i],
                    subName:  _nameArr[i],
                    name:  _nameArr[i],
                    desc: this.formDevice.desc,
                    deviceType: "",
                    isVisibleName: String(this.formDevice.isVisibleName), //'1',
                    isVisibleDesc: String(this.formDevice.isVisibleDesc),//'1',
                    isVisibleGroup:  '1',
                    isVisiblePosition: '1'
                })
            })

            console.log("resultDeviceData:", resultDeviceData);

            this.$emit('submitDevice', resultDeviceData);
            this.device_modal = false; // 关闭弹层
        },
        //取消
        cancel () {
            this.device_modal = false; //关闭弹层
        }
    },
    //监听当前弹层状态
    watch:{
        device_modal:function(data){
            if (data && this.deviceData){
                console.log("设备信息回显的数据:",this.deviceData)
                this.formDevice = {
                    deviceId: this.deviceData.deviceId,
                    subName: this.deviceData.deviceName,
                    desc: this.deviceData.desc,
                    deviceName:  this.deviceData.deviceName,
                    deviceType: "",
                    isVisibleName: String(this.deviceData.isVisibleName),
                    isVisibleDesc: String(this.deviceData.isVisibleDesc),
                    isVisibleGroup: String(this.deviceData.isVisibleGroup) || '1',
                    isVisiblePosition: String(this.deviceData.isVisiblePosition) || '1'
                }
            }
        }
    },
    created(){},
    mounted(){
        // 给设备信息数组赋值
        devicesInfo.map(v=>{
            this.device_listData.push({ deviceId: v.deviceId, deviceName: v.deviceName, deviceType: v.deviceType })
        })

    }
}
</script>